<#include "../header.ftl" />
<@head title="碎碎念" />
<#import "/META-INF/mspring.ftl" as mspring />
		<@side.sidenav active="碎碎念"/>
	    <div class="g-content">
	        <div class="g-content-container">
	            <div class="g-p">
					<div class="m-crumb">
					    <ul class="f-cb">
					        <li><i>&gt;</i><a href="${spaceUrl}/admin">博客管理</a></li>
					        <li><i>&gt;</i><a href="javascript:void(0);">碎碎念</a></li>
					    </ul>
					</div>
					<div class="page-title">
						<h1>碎碎念</h1>
					</div>
					<div class="m-content">
						<style type="text/css">
							body * {
								font-family: Verdana,'Microsoft YaHei',Tahoma, Arial, Sans-Serif;
							}
							.remark .tb,.remark .list{border:1px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px}
							.remark .tb{padding:10px;margin-top:6px;background:#faffff}
							.remark .tb .txt{margin:0;border:5px solid #5490c0;background:0}
							.remark .tb .txt textarea{width:100%;border:0;background:0;font-size:14px}
							.remark .tb .btn{border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;box-shadow:3px 3px 3px #aaa;-webkit-box-shadow:3px 3px 3px #aaa;-moz-box-shadow:3px 3px 3px #aaa;margin-right:8px;display:inline-block;height:25px;line-height:22px;text-align:center;width:100px;color:#fff;font-size:14px;cursor:pointer;background:#5490c0;cursor:pointer}
							.remark .tb .btn:hover{font-weight:bold}
							.remark .tb .ins{background:#ebf7fa;height:18px;padding:2px;margin-left:0px}
							.remark .tb .ins a{display:inline-block;margin:0 4px;padding-left:18px}
							.remark .tb .ins .emotion{background:url('${base}/images/emotion.gif') 0 center no-repeat}
						</style>
						<script type="text/javascript" src="${base}/script/jquery.form.js"></script>
						<script type="text/javascript">
							function add(){
								$('#twitterPostForm').submit();
							}
							function del(id){
								if(!id)return;
								$.post('${spaceUrl}/admin/twitter/delete/' + id, function(response){
									if(response.success){
										$('#twitter_' + id).fadeOut();
									}
									else{
										alert(e.message);
									}
								});
							}
							$(document).ready(function(){
								$('#content').ctrlEnter(function(){
									$('#twitterPostForm').submit();
								});
							
								$('#twitterPostForm').ajaxForm({
									success : function(response){
										if(response.success){
											$('#content').val('');
											var t = response.data.twitter;
											var html = [
												'<div class="media" id="twitter_' + t.id + '" style="display:none;">',
								        		'	<a href="#" class="media-cap"><img src="' + mlog.variable.base + '/uploads' + t.author.smallAvatar + '" class="img-radius"></a>',
								        		'	<div class="media-body">',
								        		'		<div class="media-body-title">',
								        		'			<strong><a href="' + mlog.variable.base + '/u/' + t.author.name + '" target="_blank">' + t.author.alias + '</a>：</strong>',
								        		'			<small class="pull-right">',
								        		'				' + t.createTime,
								        		'				<a href="javascript:d(' + t.id + ', \'' + t.author.alias + '\');">回复</a>',
								        		'				<a href="javascript:del(' + t.id + ');">删除</a>',
								        		'			</small>',
								        		'		</div>',
								        		'		<p class="typo-p">',
								        		'			' + t.content,
								        		'		</p>',
								        		'	</div>',
								        		'</div>',
											].join("");
											var medias = $('#medias').children('.media');
											if(medias.length > 0){
												$(medias[0]).before(html);
											}
											else {
												$('#listpub').fadeOut();
												$('#medias').append(html);
											}
											//动画展示
											$('#twitter_' + t.id).fadeIn();
										}
										else{
											alert(response.message);
										}
									}
								});
							});
						</script>
						<form id="twitterPostForm" class="remark" action="${spaceUrl}/admin/twitter/add" method="POST">
							<div class="tb">
								<div class="txt">
									<textarea name="content" id="content" autofocus="autofocus" rows="3"></textarea>
								</div>
								<table style="width: 100%;" cellpadding="0" cellspacing="0">
									<tbody>
										<tr>
											<td valign="top">
												<#--
												<div class="ins">
													<a class="emotion" hidefocus="hidefocus" href="javascript:void(0);">表情</a>
												</div>
												-->
											</td>
											<td width="80" align="right">
												<span class="btn" onclick="add();">发表</span>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</form>
						<form name="commentForm" id="commentForm" action="${spaceUrl}/admin/twitter/list" method="GET">
							<@spring.bind "twitterPage" />
							<!-- pagination parameter -->
							<@spring.formHiddenInput path="twitterPage.pageNo" />
							<@spring.formHiddenInput path="twitterPage.totalPages" />
							<@spring.formHiddenInput path="twitterPage.totalCount" />
							<!-- sorter parameter -->
							<@spring.formHiddenInput path="twitterPage.sortEnable" />
							<@spring.formHiddenInput path="twitterPage.sort.field" />
							<@spring.formHiddenInput path="twitterPage.sort.order" />
							
							<div id="medias" class="sep">
					    		<#if (twitterPage?exists && twitterPage.result?size > 0)>
						        	<#list twitterPage.result as twitter>
						        		<div class="media" id="twitter_${twitter.id}">
						        			<a href="#" class="media-cap"><img src="<@avatar avatar=twitter.author.smallAvatar />" class="img-radius"></a>
						        			<div class="media-body">
						        				<div class="media-body-title">
						        					<strong><a href="<@UserSpaceUrl name=twitter.author.name />" target="_blank">${twitter.author.alias}</a>：</strong>
						        					<small class="pull-right">
						        						${twitter.createTime}
						        						<a href="javascript:d(${twitter.id}, '${twitter.author.alias}');">回复</a>
						        						<a href="javascript:del(${twitter.id});">删除</a>
						        					</small>
						        				</div>
						        				<p class="typo-p">
						        					${twitter.content}
						        				</p>
						        			</div>
						        		</div>
							    	</#list>
							    <#else>
							    	<a class="listpub" id="listpub" href="javascript:void(0);" class="sep"><i class="icon-plus"></i><span>&nbsp;暂无碎碎念</span></a>
					        	</#if>
					        </div>
						    <#if (twitterPage.totalPages > 1)>
		                        <@space.pagenavi pageEntity=twitterPage baseUrl=spaceUrl + "/admin/twitter/list?pageNo=$page$" />
		                    </#if>
						</form>
					</div>
	            </div>
	        </div>
	    </div>
<#include "../footer.ftl" />